<template>
	<div class="base-content">
		<div class="container">
			<div class="plate"></div>
			<div class="cup">
				<div class="top">
					<div class="vapour">
						<span style="--i:1;"></span>
						<span style="--i:3;"></span>
						<span style="--i:16;"></span>
						<span style="--i:5;"></span>
						<span style="--i:13;"></span>
						<span style="--i:20;"></span>
						<span style="--i:6;"></span>
						<span style="--i:7;"></span>
						<span style="--i:10;"></span>
						<span style="--i:8;"></span>
						<span style="--i:17;"></span>
						<span style="--i:11;"></span>
						<span style="--i:12;"></span>
						<span style="--i:14;"></span>
						<span style="--i:2;"></span>
						<span style="--i:9;"></span>
						<span style="--i:15;"></span>
						<span style="--i:4;"></span>
						<span style="--i:19;"></span>
						<span style="--i:18;"></span>
					</div>
					<div class="circle">
						<div class="tea"></div>
					</div>
				</div>
				<div class="teabag">
					<div class="teabag-line"></div>
					<img src="@/assets/logo.png" class="teabag-logo" />
				</div>
				<div class="handle"></div>
			</div>
		</div>

		<el-card class="login-content" style="width: 400px;" shadow="hover">
			<div>
				<img src="@/assets/logo.png" class="logo" />
			</div>
			<el-form ref="formRef" :model="form" label-width="4em">
				<el-form-item label="账号">
					<el-input v-model="form.account"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="form.pwd" show-password></el-input>
				</el-form-item>
			</el-form>
			<el-button style="width: 100%;" type="primary" @click="login" :loading="btnLoading">登录</el-button>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import {
	reactive,
	ref
} from 'vue'
import {
	useStore
} from 'vuex'
import {
	useRouter
} from 'vue-router'
const store = useStore()
const router = useRouter()
const form = reactive({
	account: 'admin',
	pwd: 'admin'
})
const btnLoading = ref(false)
const login = () => {
	btnLoading.value = true
	store.commit('setTabs', [])
	store.commit('user/setUser', {
		id: '1',
		name: 'Admin',
		first: true,
		avatar: 'https://xindeas.gitee.io/my-wh/user.gif'
	})
	router.push('/')
}
</script>

<style scoped>
.base-content {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	position: relative;
	background: #628b60;
}

.login-content {
	margin: 0 2em;
}

.logo {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	margin-bottom: 1em;
}

.container {
	position: relative;
	height: 100%;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.cup {
	position: relative;
	width: 280px;
	height: 150px;
	background: linear-gradient(to right, #f9f9f9, #d9d9d9);
	border-bottom-left-radius: 45%;
	border-bottom-right-radius: 45%;
}

.teabag-line {
	position: absolute;
	height: 45px;
	width: 5px;
	top: -40px;
	left: 25px;
	border-left: 2px solid #dcdcdc;
	border-top: 2px solid #dcdcdc;
	border-radius: 50% 0 0 50%;
}

.teabag {
	position: absolute;
	bottom: 40px;
	left: 40px;
	height: 50px;
	width: 50px;
	background: linear-gradient(#edcb8d, #c5a365, #c57e65);
	transform: rotateZ(0deg) rotateY(0deg);
	box-shadow: 20px 30px 35px rgba(0, 0, 0, 0.2);
	animation: tbag-ani 2s linear alternate infinite;
	border-right: 2px solid #9d563d;
	border-bottom: 2px solid #9d563d;
}

@keyframes tbag-ani {
	0% {
		transform: rotateZ(0deg) rotateY(0deg);
		box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.4);
	}

	100% {
		left: 20px;
		bottom: 43px;
		transform: rotateZ(15deg) rotateY(30deg);
		box-shadow: 20px 30px 35px rgba(0, 0, 0, 0.2);
	}
}

.teabag-logo {
	position: absolute;
	bottom: 5px;
	left: 5px;
	width: 40px;
	height: 40px;
}

.top {
	position: absolute;
	top: -30px;
	height: 60px;
	width: 100%;
	background: linear-gradient(to right, #f9f9f9, #d9d9d9);
	border-radius: 50%;
}

.circle {
	position: absolute;
	top: 5px;
	left: 10px;
	height: 50px;
	width: calc(100% - 20px);
	background: linear-gradient(to left, #f9f9f9, #d9d9d9);
	border-radius: 50%;
	box-sizing: border-box;
	overflow: hidden;
}

.tea {
	position: absolute;
	top: 20px;
	left: 0;
	height: 100%;
	width: 100%;
	background: radial-gradient(#edcb8d, #c5a365, #c57e65);
	border-radius: 50%;
}

.handle {
	position: absolute;
	top: 10px;
	right: -35px;
	height: 60px;
	width: 60px;
	border: 20px solid #dcdcdc;
	border-left: 20px solid transparent;
	border-bottom: 20px solid transparent;
	transform: rotate(42deg);
	border-radius: 50%;
}

.plate {
	position: absolute;
	width: 450px;
	height: 120px;
	bottom: calc(50% - 115px);
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(to right, #f9f9f9, #e7e7e7);
	border-radius: 50%;
	box-shadow: 35px 35px 35px rgba(0, 0, 0, 0.2);
}

.plate::before {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 10px;
	right: 10px;
	border-radius: 50%;
	background: linear-gradient(to left, #f9f9f9, #e7e7e7);
}

.plate::after {
	content: "";
	position: absolute;
	top: 40px;
	bottom: 20px;
	left: 30px;
	right: 30px;
	border-radius: 50%;
	background: radial-gradient(
		rgba(0, 0, 0, 0.2) 25%,
		transparent,
		transparent
	);
}

.vapour {
	position: relative;
	display: flex;
	z-index: 1;
	padding: 0 20px;
}

.vapour span {
	position: relative;
	bottom: 40px;
	display: block;
	margin: 0 1px 50px;
	min-width: 8px;
	height: 80px;
	background: #ffffff;
	border-radius: 50%;
	animation: animate 5s linear infinite;
	opacity: 0;
	filter: blur(8px);
	animation-delay: calc(var(--i) * 0.5s);
}

@keyframes animate {
	0% {
		transform: translateY(0) scaleX(1);
		opacity: 0;
	}

	15% {
		opacity: 1;
	}

	50% {
		transform: translateY(-150px) scaleX(5);
	}

	95% {
		opacity: 0;
	}

	100% {
		transform: translateY(-300px) scaleX(10);
	}
}
</style>
